<!--
 * @Author: FengTeng
 * @Date: 2021-03-03 11:33:05
 * @LastEditTime: 2021-03-03 12:30:28
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\update-password-modal\UpdatePasswordModal.vue
-->
<template>
  <div class="update-password-modal" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-form :rules="updatePwdConfig.rules" ref="updatePasswordRef" :model="updatePasswordData">
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="updatePasswordData.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item class="form-option-button">
          <el-button type="info" @click="handleCancel()">取消</el-button>
          <el-button type="primary" :loading="confirmBtnLoading" @click="handleConfirm()">确定</el-button>
        </el-form-item>
      </el-form>
    </spa-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
export default {
  name: "UpdatePasswordModal",
  components: {
    SpaModal
  },
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      updatePasswordData: {
        newPassword: ""
      },
      updatePwdConfig: {
        rules: {
          newPassword: [
            { required: true, message: "请输入新密码！", trigger: "blur" },
            { min: 6, max: 16, message: "密码的长度为6-16位！", trigger: "blur" }
          ]
        }
      },
      userId: "",
      confirmBtnLoading: false
    };
  },
  methods: {
    openModal(event) {
      console.log(event);
      this.userId = event.id || "";
      this.modalConfig.visible = true;
    },
    handleConfirm() {
      if (this.formDataValidate()) {
        $.post(
          apis.updatePasswordApi,
          {
            id: this.userId,
            pwd: this.updatePasswordData.newPassword,
            type: "update"
          },
          resp => {
            resp = JSON.parse(resp);
            if (resp.code === "ok") {
              this.modalConfig.visible=false;
              this.$message.success(resp.msg);
            } else {
              this.$message.error(resp.msg);
            }
          }
        );
      }
    },
    handleCancel() {
      this.modalConfig.visible = false;
      this.resetFormData();
    },
    handleDialogClose() {
      this.resetFormData();
    },
    formDataValidate() {
      let valid = false;
      this.$refs.updatePasswordRef.validate(_valid => {
        valid = _valid ? true : false;
        return valid;
      });
      return valid;
    },
    resetFormData() {
      console.log("重置表单");
      this.updatePasswordData = {
        newPassword: ""
      };
      this.userId = "";
      this.confirmBtnLoading = false;
      this.$refs.updatePasswordRef && this.$refs.updatePasswordRef.resetFields();
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
